<!--
 * @Author: windys
 * @Description: 充值
 * @Date: 2022-02-19 13:54:41
-->
<template>
  <van-action-sheet v-model:show="show" title="充值金石">
    <div class="totla">我的钱包余额：{{ total }}金石</div>
    <div class="content">
      <div class="gd_container">
        <div
          class="gd_item"
          v-for="(item, index) in list"
          :key="item.id"
          @click="handleClick(item, index)"
          :class="{ active: active === index }"
        >
          <div class="title">{{ item.goldenStone }}金石</div>
          <div class="rmb">{{ item.rmb }}￥</div>
          <i
            v-if="active === index"
            class="iconfont icon-youxiajiaogouxuan"
          ></i>
        </div>
      </div>
      <van-button type="success" round block @click="handlePay"
        >立即支付</van-button
      >
    </div>
  </van-action-sheet>
</template>




<script >
import { computed, defineComponent, ref, watch } from "vue";
import { useStore } from "@/store";
import storage from "@/utils/storage";
import { getwalletData } from "@/api/common";
import { getMoneyType } from "@/api/my";
import { payRechargeGD } from "@/api/pay";
import { is_weixin } from "@/utils";
import wx from "weixin-jsapi";
import { Toast } from "vant";
export default defineComponent({
  setup() {
    const item = ref(null);
    const store = useStore();
    ref(computed(() => store.SHOW_RECHARGE));
    const show = computed({
      get: () => store.SHOW_RECHARGE,
      set: () => store.closeRecharge(),
    });
    watch(
      () => show.value,
      (v) => {
        if (v) {
          init();
        } else {
          active.value = null;
          good.value = null;
        }
      }
    );
    const list = ref([]);
    const total = ref(0);
    const init = async () => {
      const user = ref(JSON.parse(storage.getStorage("v3_userinfo_mobile")));
      const res = await getwalletData({ orgCode: user.value.orgId });
      const res2 = await getMoneyType({ type: 0 });
      total.value = res ? res.consumerMoney : 0;
      list.value = res2;
    };

    const active = ref(null);
    const good = ref(null);
    const handleClick = (item, index) => {
      active.value = index;
      good.value = item;
    };

    const user = ref(JSON.parse(storage.getStorage("v3_userinfo_mobile")));
    const handlePay = async () => {
      if (!good.value) {
        Toast.fail("请选择商品");
        return;
      }
      if (is_weixin()) {
        const params = {
          userId: user.value.userId,
          subjectId: good.value.id,
          payType: 30,
          whichPay: 2,
          clientIp: window.ipAddress,
          isQr: 3,
        };
        const res = await payRechargeGD(params);
        if (typeof res === "object") {
          wx.config({
            debug: false, // 开启调试模式,
            appId: res.appid, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: res.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.nonce_str, // 必填，生成签名的随机串
            signature: res.sign, // 必填，签名
            jsApiList: ["chooseWXPay"],
          });
          wx.chooseWXPay({
            appId: res.appid,
            nonceStr: res.nonce_str,
            package: "prepay_id=" + res.prepay_id,
            signType: "MD5",
            timestamp: res.timestamp,
            paySign: res.sign,
            success: function (res) {
              Toast.success("支付成功");
              location.reload();
            },
            cancel: function (res) {
              Toast.fail("支付已取消");
            },
            fail: function (res) {
              Toast.fail("支付失败");
            },
          });
        }
      } else {
        const params = {
          userId: user.value.userId,
          subjectId: good.value.id,
          payType: 30,
          whichPay: 2,
          clientIp: window.ipAddress,
          isQr: 2,
        };
        const res = await payRechargeGD(params);
        if (typeof res === "object") {
          let urls = res.mweb_url;
          let redirect_url = encodeURIComponent(
            "http://www.caihuapp.com/mobile/#/recharge"
          );
          let url = urls + `&redirect_url=${redirect_url}`;
          window.localStorage.setItem("m_orderId", res.orderId);
          location.href = url;
        }
      }
    };
    return {
      item,
      active,
      show,
      total,
      list,
      handleClick,
      handlePay,
    };
  },
});
</script>




<style lang="scss" scoped>
.totla {
  font-size: 16px;
  margin: 10px;
  color: #b85809;
}
.content {
  min-height: 200px;
  padding: 5px;
  .gd_container {
    display: grid;
    text-align: center;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 80px 80px 80px;
    margin-bottom: 10px;
    .gd_item {
      margin: 5px;
      border: 1px solid #f1a10c;
      position: relative;
      overflow: hidden;
      border-radius: 5px;
      .title {
        font-size: 16px;
        color: #ff7b00;
        margin-top: 10px;
      }
      .rmb {
        color: #ff9100;
        margin-top: 5px;
        font-size: 18px;
      }
      i {
        font-size: 28px;
        position: absolute;
        right: -2px;
        bottom: -2px;
        color: #ff9100;
      }
    }
  }
  button {
    margin-bottom: 20px;
  }
}
</style>
